<template>
    <div>

        <LoadingGroup :pending="pending" :error="error">
            <template v-for="(item) in data">
                <Banner :data="item.data" v-if="item.type === 'swiper'" />
                <ImageNav :data="item.data" v-else-if="item.type === 'icons'" />
                <ImageAd :data="item.data" v-else-if="item.type === 'imageAd'" />
                <ListCard :title="item.title" type="course" :data="item.data" v-if="item.type === 'list'" />
                <ListCard :title="item.title" :type="item.listType" :data="item.data"
                    v-if="item.type === 'promotion'" />
            </template>

        </LoadingGroup>
    </div>
</template>

<script setup>


// 导航栏标题
useHead({
    title: "蒂莎编程首页",
    meta: [
        { name: "description", content: "首页描述" },
        { name: "keywords", content: "首页关键词" }
    ]
})


// 接口
const { data, pending, error, refresh } = await useIndexDataApi()


// 服务端时直接报错
if (import.meta.server && error.value) {
    showError({ statusCode: error.value?.data.statusCode, message: error.value?.data.data, })
}

</script>

<style></style>